import React, { Component } from 'react'
import Header from '../../components/Header/header';
import { Button, Form, Input, Toast } from 'antd-mobile'

import { connect } from "react-redux"
import { bindActionCreators } from "redux";
import { actions, getUser } from '../../store/modules/login'

import orange_logo from "../../assets/img/pic_logo_orange.png";
import '../register/register.less'

class login extends Component {
  render() {
    console.log(this.props);
    const {
      user,
      loginFn: { changeUser, doLogin },
      history: { push }
    } = this.props;
    return (
      <div className='firstbox'>
        <Header title="登录" register></Header>
        <img src={orange_logo} alt="" />

        <div>{JSON.stringify(user)}</div>
        <Form layout='horizontal'>
          <Form.Item label="手机号" name="username">
            <Input
              placeholder="请输入手机号"
              clearable
              onChange={e => changeUser("phone", e)}
            />
          </Form.Item>

          <Form.Item label="密码" name="password">
            <Input
              placeholder="请输入密码"
              clearable
              type="password"
              onChange={e => changeUser("password", e)}
            />
          </Form.Item>
        </Form>

        <div className="text-center">
          <Button color="primary" onClick={() => doLogin(push)}>登录</Button>
        </div>
      </div>
    )
  };
}

//取数据
const mapStateToProps = (state) => {
  return {
    user: getUser(state),
  };
};
//取方法
const mapDispatchToProps = (dispatch) => {
  return {
    loginFn: bindActionCreators(actions, dispatch),
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(login);
